<template>
    <div>
       
       <el-breadcrumb separator-class="el-icon-arrow-right">
  <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
  <el-breadcrumb-item>权限管理</el-breadcrumb-item>
  <el-breadcrumb-item>权限列表</el-breadcrumb-item>
  
</el-breadcrumb>
<el-card class="box-card">
 <el-table
 height="600"
    :data="rightsList"
    style="width: 100%"
    :default-sort = "{prop: 'permissionName', order: 'descending'}"
    >
    <el-table-column type="index"></el-table-column>
    <el-table-column
      prop="permissionName"
      label="权限名称"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="permissionDescription"
      label="权限描述"
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="perPath"
      label="路径"
      
      sortable
      width="180">
    </el-table-column>
    <el-table-column
      prop="permissionType"
      label="类型"
       sortable
      >
      <template slot-scope="scope" >
     <p v-if="scope.row.permissionType===1">一级菜单</p>
            <p v-if="scope.row.permissionType===2">二级菜单</p>
             <p v-if="scope.row.permissionType===3">按钮</p>
            <p v-if="scope.row.permissionType===null"></p>
          </template>

    </el-table-column>
  </el-table>
</el-card>
  </div>
</template>
<script>
export default {
    data(){
      return{
        //权限列表
userId:1,
rightsList:[]
      }

    },
    created(){
this.getRightList()

    },
    methods:{
 async getRightList(){
  const {data:res}=await this.$http.get(`user-permission/getThisUserPermission?userId=1`)
if (res.code !== 200) {
        this.$message.error("请求失败！");
      } 
      console.log(res.data)
this.rightsList=res.data
}

    }

}
</script>
<style lang="less" scoped>

</style>